<template>
	<view>
		<uni-section padding>
			<uni-grid :column="4" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons :type="list.url" :size="30" color="#777" />
						<text class="text">{{item.text}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const dynamicList = ref([]);
	const list = ref([{
			url: '/static/c1.png',
			text: 'Grid 1',
			badge: '0',
			type: "primary"
		},
		{
			url: '/static/c2.png',
			text: 'Grid 2',
			badge: '1',
			type: "success"
		},
		{
			url: '/static/c3.png',
			text: 'Grid 3',
			badge: '99',
			type: "warning"
		},
		{
			url: '/static/c4.png',
			text: 'Grid 4',
			badge: '2',
			type: "error"
		},
		{
			url: '/static/c5.png',
			text: 'Grid 5'
		},
		{
			url: '/static/c6.png',
			text: 'Grid 6'
		},
		{
			url: '/static/c7.png',
			text: 'Grid 7'
		},
		{
			url: '/static/c8.png',
			text: 'Grid 8'
		}
	]);

	const change = (e) => {
		let index = parseInt(e.detail.index);
		uni.showToast({
			title: `点击了第 ${index + 1} 个网格项`,
			icon: 'none'
		});
	};
</script>

<style lang="scss">
	.image {
		width: 25rpx;
		height: 25rpx;
	}

	.text {
		font-size: 14rpx;
		margin-top: 5rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15rpx;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15rpx 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15rpx 0;
	}

	.grid-dot {
		position: absolute;
		top: 5rpx;
		right: 15rpx;
	}

	.swiper {
		height: 420rpx;

		// H5 下不同屏幕宽度的样式
		@media screen and (min-width: 768px) and (max-width: 1425px) {
			height: 630rpx;
		}

		@media screen and (min-width: 1425px) {
			height: 830rpx;
		}
	}
</style>